<template>
	<view>
		<tab-bar @click="toogleTab" :tabList="tablist" :current="current"></tab-bar>
		<swiper class="swiper" style="min-height: 10rem;" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
		 :duration="duration">
			<swiper-item v-for="(item,index) in banners" :key="index">
				<image :src="item.imageUrl" mode="scaleToFill" style="width: 100%;height: 100%" @click="toDetails(item)"></image>
			</swiper-item>
		</swiper>
		<song-list :ablumArrayData="recommand_ablums">
			<div slot="title">
				<p class="recommand-title">推荐歌单</p>
			</div>
		</song-list>
		<musicList :musicArrayData="recommand_musics">
			<div slot="title">
				推荐歌曲
			</div>
		</musicList>
		<min-player></min-player>
	</view>
</template>

<script>
	import minPlayer from "../../components/min-player.vue"
	import songList from "../../components/song-list.vue"
	import musicList from "../../components/music-list.vue"
	import tabBar from "../../components/tabbar.vue"
	export default {
		data() {
			return {
				background: ['color1', 'color2', 'color3'],
				indicatorDots: false, //显示位置点
				autoplay: true,
				interval: 2000,
				duration: 500,
				banners: [],
				recommand_ablums: [],
				recommand_musics: [],
				current: 0,
				tablist: [{
						icon: '&#xe6a2;',
						text: '每日推荐',
						to: "/pages/Recommand/Recommand"
					},
					{
						icon: '&#xe7c5;',
						text: '热门榜单',
						to: "/pages/Hot/Hot",
					},
					{
						to: "/pages/Search/Search",
						icon: '&#xe629;',
						text: '搜索',
					}
				]

			}
		},
		components: {
			songList,
			musicList,
			tabBar,
			minPlayer
		},
		methods: {
			async getBanner() {
				const res = await Promise.all([
					this.rq.fetchGet(this.apiUrl.banner, {}),
					this.rq.fetchGet(this.apiUrl.recommand_ablum, {
						limit: 12
					}),
					this.rq.fetchGet(this.apiUrl.recommend_songs, {})
				])
				this.banners = res[0][1].data.banners
				this.recommand_ablums = res[1][1].data.result;
				this.recommand_musics = res[2][1].data.result;
			},
			toDetails(item) {
				console.log(item)
			},
			toogleTab(index) {
				uni.navigateTo({
					url: this.tablist[index].to,
					openType: "navigate",
					animationType: "slide-in-top",
					animationDuration: 1000
				})
			}
		},
		onLoad() {
			this.getBanner()
		}
	}
</script>

<style>

</style>
